<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>demo</title>
    <link href="../css/qs.css" rel="stylesheet" type="text/css" />
    <link href="../css/qs_ui.css" rel="stylesheet" type="text/css" />
    <link href="../css/quote2_dli.css" rel="stylesheet" type="text/css" />
    <link href="uidemo.css" rel="stylesheet" type="text/css" />
</head>
<body class="ifm-body">

<div class="ifm-panel">
    <h2 class="til">Util.GroupBox</h2>
    <textarea class="codetxt" style="height:200px;">var gb = new Util.GroupBox($('#test'),[{
        name: 'GroupBox1',
        id: 1
    }, {
        name: 'GroupBox2',
        id: 2,
        closable: false
    }, {
        name: 'GroupBox3',
        id: 3
    }], {
        width: 150,
        groupBoxHeight: 200,
    });</textarea>
    <h2 class="til">Simple Group Box</h2>
    <div id="test" class="clearfix"></div>
    <br />
    <h2 class="til">Animate Group Box</h2>
    <div id="test2" class="clearfix"></div>
</div>
       
</div>

<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../js/ui/util.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">
    var gb = new Util.GroupBox($('#test'),[{
        name: 'GroupBox1',
        id: 1
    }, {
        name: 'GroupBox2',
        id: 2,
        closable: false
    }, {
        name: 'GroupBox3',
        id: 3
    }], {
        width: 150,
        groupBoxHeight: 200,
		animate:true,
		autoHeight:true
    });
	gb.getGroup(1).bd.html('<p>test1</p><p>test1</p><p>test1</p><p>test1</p>');
    gb.getGroup(2).bd.html('<p>test2</p>');
	gb.getGroup(3).bd.html('<p>test2</p>');
    var gb2 = new Util.GroupBox($('#test2'),[{
        name: 'GroupBox1',
        id: 1
    }, {
        name: 'GroupBox2',
        id: 2,
        closable: false
    }, {
        name: 'GroupBox3',
        id: 3
    }], {
        width: 300,
        groupBoxHeight: 100,
        animate:true
    });
</script>
</body>
</html>
